import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/24/outline'
import { NavLink } from 'react-router-dom'
import { 
  ChatBubbleLeftRightIcon, 
  PhotoIcon, 
  ClipboardDocumentListIcon, 
  PuzzlePieceIcon, 
  UserIcon,
  PencilSquareIcon
} from '@heroicons/react/24/outline'
import { useAuthStore } from '@/stores/authStore'

const navigation = [

  { name: '💕 聊天', href: '/chat', icon: ChatBubbleLeftRightIcon },
  { name: '✨ 便签', href: '/notes', icon: ClipboardDocumentListIcon },
  { name: '🌸 相册', href: '/album', icon: PhotoIcon },
  { name: '🎀 游戏', href: '/game', icon: PuzzlePieceIcon },
  { name: '🦋 语法检查', href: '/grammar', icon: PencilSquareIcon },
  { name: '👤 个人', href: '/profile', icon: UserIcon },
]

// 隐藏的管理员功能
const adminNavigation = [
  { name: '👑 用户管理', href: '/admin/users', icon: UserIcon },
]

interface MobileNavProps {
  isOpen: boolean
  onClose: () => void
}

const MobileNav = ({ isOpen, onClose }: MobileNavProps) => {
  const { user, logout } = useAuthStore()
  
  // 检查是否为管理员（这里简单判断用户名包含admin，实际项目中应该用角色字段）
  const isAdmin = user?.username?.includes('admin') || user?.username === 'user1'

  return (
    <Transition.Root show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-50 lg:hidden" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="transition-opacity ease-linear duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="transition-opacity ease-linear duration-300"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-gray-900/80" />
        </Transition.Child>

        <div className="fixed inset-0 flex">
          <Transition.Child
            as={Fragment}
            enter="transition ease-in-out duration-300 transform"
            enterFrom="-translate-x-full"
            enterTo="translate-x-0"
            leave="transition ease-in-out duration-300 transform"
            leaveFrom="translate-x-0"
            leaveTo="-translate-x-full"
          >
            <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
              <Transition.Child
                as={Fragment}
                enter="ease-in-out duration-300"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in-out duration-300"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
                <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                  <button
                    type="button"
                    className="-m-2.5 p-2.5"
                    onClick={onClose}
                  >
                    <span className="sr-only">关闭侧边栏</span>
                    <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
                  </button>
                </div>
              </Transition.Child>
              
              {/* 侧边栏内容 */}
              <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white/95 backdrop-blur-md px-6 pb-4 shadow-soft">
                {/* Logo */}
                <div className="flex h-16 shrink-0 items-center">
                  <h1 className="text-2xl font-bold text-gradient-primary font-display">
                    🌸 温の家 💕
                  </h1>
                </div>
                
                {/* 导航菜单 */}
                <nav className="flex flex-1 flex-col">
                  <ul role="list" className="flex flex-1 flex-col gap-y-7">
                    <li>
                      <ul role="list" className="-mx-2 space-y-1">
                        {navigation.map((item) => (
                          <li key={item.name}>
                            <NavLink
                              to={item.href}
                              onClick={onClose}
                              className={({ isActive }) =>
                                `group flex gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all duration-200 ${
                                  isActive
                                    ? 'bg-gradient-to-r from-primary-50 to-primary-100 text-primary-700 shadow-pink border border-primary-200/50'
                                    : 'text-secondary-700 hover:text-primary-600 hover:bg-primary-50/50 hover:shadow-soft'
                                }`
                              }
                            >
                              <item.icon
                                className="h-5 w-5 shrink-0 transition-transform duration-200 group-hover:scale-110"
                                aria-hidden="true"
                              />
                              {item.name}
                            </NavLink>
                          </li>
                        ))}
                      </ul>
                    </li>
                    
                    {/* 管理员功能 */}
                    {isAdmin && (
                      <li>
                        <div className="text-xs font-semibold leading-6 text-gray-400 mb-2 mt-4">
                          管理员功能
                        </div>
                        <ul role="list" className="-mx-2 space-y-1">
                          {adminNavigation.map((item) => (
                            <li key={item.name}>
                              <NavLink
                                to={item.href}
                                onClick={onClose}
                                className={({ isActive }) =>
                                  `group flex gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all duration-200 ${
                                    isActive
                                      ? 'bg-gradient-to-r from-amber-50 to-orange-100 text-amber-700 shadow-amber border border-amber-200/50'
                                      : 'text-gray-600 hover:text-amber-600 hover:bg-amber-50/50 hover:shadow-soft'
                                  }`
                                }
                              >
                                <item.icon
                                  className="h-5 w-5 shrink-0 transition-transform duration-200 group-hover:scale-110"
                                  aria-hidden="true"
                                />
                                {item.name}
                              </NavLink>
                            </li>
                          ))}
                        </ul>
                      </li>
                    )}
                    
                    {/* 用户信息 */}
                    <li className="mt-auto">
                      <div className="border-t border-white/20 pt-4">
                        <div className="flex items-center gap-x-3 mb-4 p-3 rounded-xl bg-gradient-to-r from-primary-50/50 to-rose-50/50 border border-white/30">
                          <div className="avatar">
                            {user?.avatar ? (
                              <img
                                className="avatar-image"
                                src={user.avatar}
                                alt={user.displayName || user.username}
                              />
                            ) : (
                              <div className="avatar-fallback">
                                {(user?.displayName || user?.username || 'U').charAt(0).toUpperCase()}
                              </div>
                            )}
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-semibold text-secondary-900 truncate">
                              {user?.displayName || user?.username}
                            </p>
                            <p className="text-xs text-secondary-600 truncate">
                              {user?.email}
                            </p>
                            <p className="text-xs mt-1">
                              { (user as any)?.partnerId
                                ? <span className="text-green-600 font-medium">已绑定 @{(user as any)?.partner?.username || '对方'}</span>
                                : <span className="text-secondary-500">未绑定</span>
                              }
                            </p>
                          </div>
                        </div>
                        
                        <button
                          onClick={() => {
                            logout()
                            onClose()
                          }}
                          className="w-full text-left text-sm text-secondary-600 hover:text-red-600 hover:bg-red-50 p-2 rounded-lg transition-all duration-200 font-medium"
                        >
                          👋 退出登录
                        </button>
                      </div>
                    </li>
                  </ul>
                </nav>
              </div>
            </Dialog.Panel>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  )
}

export default MobileNav